import React, { memo, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Swiper } from "antd-mobile";
import style from "./index.module.scss";
import { medicineInterface } from "@/Type/git.ts";
import { NavBar } from "react-vant";
import { ActionBar } from "react-vant";
import { CartO, ChatO } from "@react-vant/icons";
import { Popup, Button } from "react-vant";
import { Stepper, Toast } from "react-vant";
import { useDispatch } from "react-redux";
import { add } from "@/Redux/cartSlice";
import { useAppSelector } from "../../../redux/store";

const Index: React.FC = memo(() => {
  const {
    state: { item },
  } = useLocation();
  const jump = useNavigate();
  const [showCloseIcon, setShowCloseIcon] = useState(false);
  const [value, setvalue] = useState(1);
  const Remaining = Math.random().toString().slice(2, 5);
  const dispatch = useDispatch();
  const { cartlist } = useAppSelector((state) => state.cart);
  const ok = () => {
    Toast.success("添加成功,请在购物车中查看");
    dispatch(add({ item, num: value }));
    setShowCloseIcon(false);
  };

  // console.log(item);
  return (
    <div className={style.body}>
      <NavBar
        leftText="返回"
        className={style.rvnavbar__content}
        onClickLeft={() => jump(-1)}
      />
      <Swiper
        className={style.swiper}
        loop
        autoplay
      >
        {item.imgs.map((item: medicineInterface, index) => {
          return (
            <Swiper.Item key={index}>
              <img src={item} alt="" style={{ width: "100%" }} />
            </Swiper.Item>
          );
        })}
      </Swiper>

      <div className={style.title}>
        <h2 className={style.titleText}>
          <span>￥</span>
          <span>{item.price}</span>
        </h2>
        <p>
          <span className={style.otc}>{item?.otc}</span>&nbsp;
          <span>
            <b>{item.desc}</b>
          </span>
        </p>
      </div>
      <div className={style.desc}>
        <p>
          <span className={style.ccc}>药房:</span>益丰大药房
        </p>
        <p>
          <span className={style.ccc}>运费</span>
          商家包邮
        </p>
        <p className={style.ccc}>
          <span>服务</span>
          @正品保证 @隐私发货 不支持无理由退换
        </p>
      </div>
      <div className={style.Instructions}>
        <p className={style.title}>药品说明</p>
        <div className={style.tablebox}>
          <table>
            <tbody>
              <tr>
                <td>药品名称</td>
                <td>{item.specification.name}</td>
              </tr>
              <tr>
                <td>生产企业</td>
                <td>{item.specification.Production}</td>
              </tr>
              <tr>
                <td>药品规格</td>
                <td>{item.specification.TabletSize}</td>
              </tr>
              <tr>
                <td>药品成分</td>
                <td>{item.specification.ingredient}</td>
              </tr>
              <tr>
                <td>药品禁忌</td>
                <td>{item.specification.DrugContraindication}</td>
              </tr>
              <tr>
                <td>主治功能</td>
                <td>{item.specification.Mainfunction}</td>
              </tr>
              <tr>
                <td>用量用法</td>
                <td>{item.specification.UsageAndDosage}</td>
              </tr>
              <tr>
                <td>药品性状</td>
                <td>{item.specification.DrugCharacter}</td>
              </tr>
              <tr>
                <td>相互作用</td>
                <td>{item.specification.interaction}</td>
              </tr>
              <tr>
                <td>存储条件</td>
                <td>{item.specification.Storagecondition}</td>
              </tr>
              <tr>
                <td>包装</td>
                <td>{item.specification.package}</td>
              </tr>
              <tr>
                <td>剂形</td>
                <td>{item.specification.Dosageform}</td>
              </tr>
              <tr>
                <td>批准文号</td>
                <td>{item.specification.ApprovalNumber}</td>
              </tr>
              <tr>
                <td>注意事项</td>
                <td>{item.specification.MattersNeedingAttention}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <p className={style.detailshop}>——————— 商品详情 ————————</p>
      <div className={style.imgdetail}>
        <span>消费提示</span>
        <br />
        <span>【OTC】请按药品说明书或者在药师指导下购买和使用</span>
        {item.imgs.map((item: string) => {
          return <img key={item} src={item} alt="" />;
        })}
        <img src={item.specificationimg} alt="" />
      </div>
      <div className={style.tolst}>
        <h2>温馨提示</h2>
        <ul>
          <li>
            1、药品请认真阅读药品说明书的注意事项、禁忌等内容，并在医
            师指导下使用，将药品置于儿重无法触及位置。
          </li>
          <li>
            2、处方通过互联网医院开具或自行上传已有处方后，经执证药师
            审核，才能发货
          </li>
          <li>
            3、医疗器械:请仔细阅读产品说明书或者在医务人员的指导下购买和使用，禁忌内容或者注意事项详见说明书，
          </li>
          <li> 4、保健食品:本品不能代替药物。</li>
          <li>5、化妆品:化妆品不能代替药品，不能治疗皮肤病等疾病</li>
          <li>
            6、药品属于特殊商品，按照国家食品药品监督管理局2016版GSP第一百七十三条规定，除药品质量原因外，药品一经售出
            不得退换。
          </li>
          <li>
            7、图片为实物拍摄，由于厂家不定期更换产品包装，如遇新包装
            上市图片更新可能滞后，具体产品请您以收到的实物为准。
          </li>
        </ul>
      </div>
      <div className={style.tolst}>
        <h2>价格说明</h2>
        <ul>
          <li>
            1、未划线价:未划线价是当前商品或服务在本平台上的实时销售
            价(不含包装费、运输费等)，是您最终决定是否购买商品或服
            务的依据。具体成交价格根据商品或服务参加的活动等情况发生
            变化，最终以订单结算页面呈现的价格为准，
          </li>
          <li>
            2、划线价:划线价为参考价，并非原价或线下实体门店的销售
            价。该划线价可能是商品或服务的网络零售指导价、商家提供的
            正品零售价或该商品/服务在本平台上曾经展示过的销售价等。由
            于地区、时间的差异性和市场行情波动，零售指导价、销售价等
            可能会与您购物时展示的价格不一致，划线价仅供您参考。
          </li>
        </ul>
      </div>

      <div className={style.demoactionbar}>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO />} text="客服" />
          <ActionBar.Icon
            badge={
              (cartlist?.length !== 0 && { content: cartlist?.length }) as any
            }
            onClick={() => jump("/cart")}
            icon={<CartO />}
            text="购物车"
          />
          <ActionBar.Button
            color="#FFA916"
            type="warning"
            onClick={() => setShowCloseIcon(true)}
            text="加入购物车"
          />
          <ActionBar.Button color="#FF4626" type="danger" text="立即购买" />
        </ActionBar>
      </div>
      <Popup
        visible={showCloseIcon}
        closeable
        style={{ height: "60%" }}
        position="bottom"
        onClose={() => setShowCloseIcon(false)}
      >
        <div className={style.top}>
          <img src={item.img} className={style.Sharing} alt="" />
          <div>
            <p className={style.titleText}>￥ {item.price}</p>
            <p>剩余 {Remaining}件</p>
            <p>已选 {item.specification.TabletSize}</p>
          </div>
        </div>
        <div className={style.main}>
          <p>规格</p>

          <div className={style.specification}>
            <span>{item.specification.TabletSize}</span>
          </div>
        </div>
        <hr />
        <div className={style.bottom}>
          <div className={style.chengbox}>
            购买数量
            <Stepper
              min={1}
              value={value}
              onChange={(v) => {
                setvalue(v);
              }}
            />
          </div>
          <Button type="danger" onClick={ok} className={style.confim}>
            确定
          </Button>
        </div>
      </Popup>
    </div>
  );
});

export default Index;
